<template>
    <div class="bg-white p-[20px]">
        <div class="flex justify-between items-center mb-[30px]">
            <span class="text-[16px]">存储设置</span>
        </div>
        <div>
            <a-table :columns="columns" :data-source="searchTable.data" :pagination="false">
                <template #bodyCell="{ column, record }">
                    <template v-if="column.dataIndex === 'status'">
                        <a-tag color="#87d068" v-if="record.key == defaultStorage">正常</a-tag>
                        <a-tag color="orange" v-else>停用</a-tag>
                    </template>
                    <template v-if="column.dataIndex === 'action'">
                        <a-button type="link" @click="setEvent(record.key)">设置</a-button>
                    </template>
                </template>
            </a-table>
        </div>

        <a-modal v-model:open="showLocalModal" :width="400" title="本地存储" @ok="confirmLocal">
            <div class="pt-[20px]">
                <a-form :model="formDataLocal" ref="formRefLocal" :label-col="{ style: { width: '80px' } }">
                    <a-form-item label="是否显示" name="status">
                        <a-switch v-model:checked="formDataLocal.status" />
                    </a-form-item>
                </a-form>
            </div>
        </a-modal>

        <a-modal v-model:open="showOSSModal" :width="500" title="阿里云存储" @ok="confirmOSS">
            <div class="pt-[20px]">
                <a-form :model="formDataOSS" ref="formRefOSS" :label-col="{ style: { width: '120px' } }">
                    <a-form-item label="是否显示" name="status">
                        <a-switch v-model:checked="formDataOSS.status" />
                    </a-form-item>
                    <a-form-item label="存储空间" name="bucket" :rules="[{ required: true, message: '请输入存储空间' }]">
                        <a-input v-model:value="formDataOSS.bucket" placeholder="请输入存储空间" />
                    </a-form-item>
                    <a-form-item label="AccessKeyID" name="accessId"
                        :rules="[{ required: true, message: '请输入AccessKeyID' }]">
                        <a-input v-model:value="formDataOSS.accessId" placeholder="请输入AccessKeyID" />
                    </a-form-item>
                    <a-form-item label="AccessSecret" name="accessSecret"
                        :rules="[{ required: true, message: '请输入AccessSecret' }]">
                        <a-input v-model:value="formDataOSS.accessSecret" placeholder="请输入AccessSecret" />
                    </a-form-item>
                    <a-form-item label="Endpoint" name="endpoint" :rules="[{ required: true, message: '请输入Endpoint' }]">
                        <a-input v-model:value="formDataOSS.endpoint" placeholder="请输入Endpoint" />
                    </a-form-item>
                    <a-form-item label="空间域名" name="domain" :rules="[{ required: true, message: '请输入空间域名' }]">
                        <a-input v-model:value="formDataOSS.domain" placeholder="请输入空间域名" />
                    </a-form-item>
                </a-form>
            </div>
        </a-modal>

        <a-modal v-model:open="showCOSModal" :width="500" title="腾讯云存储" @ok="confirmCOS">
            <div class="pt-[20px]">
                <a-form :model="formDataCOS" ref="formRefCOS" :label-col="{ style: { width: '120px' } }">
                    <a-form-item label="是否显示" name="status">
                        <a-switch v-model:checked="formDataCOS.status" />
                    </a-form-item>
                    <a-form-item label="存储空间" name="bucket" :rules="[{ required: true, message: '请输入存储空间' }]">
                        <a-input v-model:value="formDataCOS.bucket" placeholder="请输入存储空间" />
                    </a-form-item>
                    <a-form-item label="APPID" name="app_id" :rules="[{ required: true, message: '请输入APPID' }]">
                        <a-input v-model:value="formDataCOS.app_id" placeholder="请输入APPID" />
                    </a-form-item>
                    <a-form-item label="SECRET_ID" name="secret_id"
                        :rules="[{ required: true, message: '请输入SECRET_ID' }]">
                        <a-input v-model:value="formDataCOS.secret_id" placeholder="请输入SECRET_ID" />
                    </a-form-item>
                    <a-form-item label="SECRET_KEY" name="secret_key"
                        :rules="[{ required: true, message: '请输入SECRET_KEY' }]">
                        <a-input v-model:value="formDataCOS.secret_key" placeholder="请输入SECRET_KEY" />
                    </a-form-item>
                    <a-form-item label="REGION" name="region" :rules="[{ required: true, message: '请输入REGION' }]">
                        <a-input v-model:value="formDataCOS.region" placeholder="请输入REGION" />
                    </a-form-item>
                    <a-form-item label="空间域名" name="domain" :rules="[{ required: true, message: '请输入空间域名' }]">
                        <a-input v-model:value="formDataCOS.domain" placeholder="请输入空间域名" />
                    </a-form-item>
                </a-form>
            </div>
        </a-modal>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { getStorageSetting, saveStorageSetting } from '@/utils/api/storage';

const searchTable = reactive({
    data: [
        {
            storage_name: '本地存储',
            key: 'local',
            status: false,
        },
        {
            storage_name: '阿里云存储',
            key: 'oss',
            status: false,
        },
        {
            storage_name: '腾讯云存储',
            key: 'cos',
            status: false,
        }
    ],
})


const columns = [
    {
        title: '存储方式',
        dataIndex: 'storage_name',
        key: 'storage_name',
        width: '50%',
    },
    {
        title: '是否启用',
        dataIndex: 'status',
        key: 'status',
        width: '30%',
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        width: '20%',
    },
];

onMounted(() => {
    initData();
});

const defaultStorage = ref('');

// 初始化数据
const initData = () => {
    // 获取默认配置
    getStorageSetting({ key: 'default_storage' }).then((res: any) => {
        // 没有配置项则默认本地存储
        if (res.data) {
            defaultStorage.value = res.data.value;
            // searchTable.data.forEach(item => {
            //     item.status = item.key == res.data.value ? true : false;
            // });
        }
    })

    // 获取本地存储配置
    getStorageSetting({ key: 'local' }).then((res: any) => {
        if (res.data) {
            formDataLocal.status = defaultStorage.value == 'local' ? true : false;
        }
    })

    // 获取阿里云存储配置
    getStorageSetting({ key: 'oss' }).then((res: any) => {
        if (res.data) {
            console.log(defaultStorage.value)
            formDataOSS.status = defaultStorage.value == 'oss' ? true : false;
            formDataOSS.bucket = res.data.bucket;
            formDataOSS.accessId = res.data.accessId;
            formDataOSS.accessSecret = res.data.accessSecret;
            formDataOSS.endpoint = res.data.endpoint;
            formDataOSS.domain = res.data.domain;
        }
    })

    // 获取腾讯云存储配置
    getStorageSetting({ key: 'cos' }).then((res: any) => {
        if (res.data) {
            formDataCOS.status = defaultStorage.value == 'cos' ? true : false;
            formDataCOS.bucket = res.data.bucket;
            formDataCOS.app_id = res.data.app_id;
            formDataCOS.secret_id = res.data.secret_id;
            formDataCOS.secret_key = res.data.secret_key;
            formDataCOS.region = res.data.region;
            formDataCOS.domain = res.data.domain;
        }
    })
};

const setEvent = (key: string) => {
    switch (key) {
        case 'local':
            showLocalModal.value = true;
            break;
        case 'oss':
            showOSSModal.value = true;
            break;
        case 'cos':
            showCOSModal.value = true;
            break;
        default:
            break;
    }
}
// 本地存储
const showLocalModal = ref(false);
const formRefLocal = ref();

const formDataLocal = reactive({
    key: 'local',
    describe: '本地存储',
    status: false
})
const confirmLocal = () => {
    console.log(formDataLocal)
    saveStorageSetting(formDataLocal).then((res: any) => {
        if (res.code == 200) {
            message.success(res.message);
        } else {
            message.error(res.message);
        }
        initData();
        showLocalModal.value = false;
    })
}

// 阿里云存储
const showOSSModal = ref(false);
const formRefOSS = ref();

const formDataOSS = reactive({
    key: 'oss',
    describe: '阿里云OSS存储',
    status: false,
    bucket: '',
    accessId: '',
    accessSecret: '',
    endpoint: '',
    domain: '',
})
const confirmOSS = () => {
    formRefOSS.value
        .validate()
        .then(() => {
            saveStorageSetting(formDataOSS).then((res: any) => {
                if (res.code == 200) {
                    message.success(res.message);
                } else {
                    message.error(res.message);
                }
                initData();
                showOSSModal.value = false;
            })
        });
}

// 腾讯云存储
const showCOSModal = ref(false);
const formRefCOS = ref();

const formDataCOS = reactive({
    key: 'cos',
    describe: '腾讯云COS存储',
    status: false,
    bucket: '',
    app_id: '',
    secret_id: '',
    secret_key: '',
    region: '',
    domain: '',
})
const confirmCOS = () => {
    formRefCOS.value
        .validate()
        .then(() => {
            saveStorageSetting(formDataCOS).then((res: any) => {
                if (res.code == 200) {
                    message.success(res.message);
                } else {
                    message.error(res.message);
                }
                initData();
                showCOSModal.value = false;
            })
        });
}
</script>